<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px" class="userAside">
        <el-card class="box-card">
          <p class="userInfoBox">
            <h3>健康档案</h3>
            <p class="userInfoBack" @click="goback()">返回</p>
          </p>
          <p style="margin: 10px auto;">
            <div>{{userDetails?.name}}</div>
            <div>档案ID：{{ userDetails?.id }}</div>
          </p>
          <p style="margin-bottom: 10px;">
            <el-icon>
              <User />
            </el-icon> <span>{{ userDetails?.genderText }}</span> <span>{{userDetails?.age | 0}}岁</span>
          </p>
          <p>
            <el-icon>
              <Iphone />
            </el-icon> <span>{{userDetails?.phone}}</span>
          </p>
        </el-card>
        <!-- 左侧tab切换 -->
        <menu-item @changeMenu="changeMenu"></menu-item>
      </el-aside>
      <el-main class="userMain">
        <el-card class="tab-card">
          <healthFilesIndex v-if="currentMenu ==='健康档案' && hadValue" :myObject="userDetails"/>
          <healthMonitorIndex v-else-if="currentMenu ==='健康监测' && hadValue" :userId="userDetails.id"/>
          <healthReportIndex v-else-if="currentMenu ==='健康报告' && hadValue" :userId="userDetails.id" />
          <div style="height: 500px;" v-else>暂无数据</div>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
defineOptions({ name: 'UserList' });
import MenuItem from '@/components/Menu/src/MenuItem.vue';
import healthMonitorIndex from '@/views/user/details/healthMonitor/healthMonitorIndex.vue';
import healthFilesIndex from '@/views/user/details/healthFiles/healthFilesIndex.vue';
import healthReportIndex from '@/views/user/details/healthReport/healthReportIndex.vue';
import { userDetailRequest } from '@/api/user';
import { ref,provide,onMounted} from "vue";
import { useRoute, useRouter } from 'vue-router';
const router = useRouter();
import { reactive,computed } from 'vue';
const route = useRoute();
// console.log(route.query.id,'路由传参数');
const currentMenu = ref('健康档案')
const changeMenu = (val:string) =>{
  currentMenu.value=val;
  // console.log('看看菜单名称',val);
}
// 获取详情
let userDetails = reactive({
  name:'',
  id:'',
  genderText:'',
  age:0,
  phone:''
})
let hadValue = ref(true)
const getUserDetail = async (id:any) => {
  hadValue.value= false
  const data: any = await userDetailRequest({ id: id });
  Object.assign(userDetails, data.data)
  hadValue.value= true
};
provide('userId', computed(() => userDetails.id))
// 返回
const goback = () =>{
  router.push({ path: '/user'});
}
onMounted(() =>{
  getUserDetail(route.query.id)
})
</script>
<style lang="scss" scoped>
.box-card {
  // margin-top: 20px;
}

.userAside {
  .userInfoBox {
    display: flex;
    justify-content: space-between;

    .userInfoBack {
      cursor: pointer;
      color: #FFC200;
    }
  }
}

.userMain{
  margin-top: -20px;
}

</style>
